export default {
    init(options) {
        var canvas = options.renderTo.tagName ?
            options.renderTo : document.getElementById(options.renderTo),
            ctx = canvas.getContext('2d'),
            devicePixelRatio = window.devicePixelRatio || 1,
            backingStoreRatio = ctx.webkitBackingStorePixelRatio ||
                ctx.mozBackingStorePixelRatio ||
                ctx.msBackingStorePixelRatio ||
                ctx.oBackingStorePixelRatio ||
                ctx.backingStorePixelRatio || 1,
            ratio = devicePixelRatio / backingStoreRatio,
            cWidth = options.width * ratio,
            cHeight = options.width * ratio,
            score = options.value,//用量
            radius = 150,
            deg0 = Math.PI / 9,
            deg1 = Math.PI * 11 / 45,
            raduisAll = Math.PI * 11 / 9,
            startRatuis = Math.PI * 8 / 9,
            scole = options.scoleList,
            color = ['mediumseagreen', 'sandybrown', 'orangered'],
            maxDosage = options.maxDosage,//最大刻度
            speed = 100,
            scaleColor = options.scaleColor ? options.scaleColor : '#fff',//刻度颜色
            scaleFontColor = options.scaleFontColor ? options.scaleFontColor : '#000',//刻度字体颜色
            angleList = diskAngleList(raduisAll, scole, maxDosage);
        canvas.width = options.width * ratio;
        canvas.height = options.height * ratio;
        let scoleSum = scole.reduce((tol, item) => {
            return tol + item
        }, 0);
        let angles = scole.map(item => { //每一阶梯所开始的角度
            return item * raduisAll / maxDosage;
        })
        let dot = new Dot(),
            angle = 0,
            credit = 0;

        (function drawFrame() {
            ctx.save();
            ctx.clearRect(0, 0, cWidth, cHeight);//清除
            ctx.translate(cWidth / 2, cHeight / 2); //重新映射画布上的 (0,0) 位置
            ctx.rotate(startRatuis);//旋转到当前位置

            dot.x = radius * Math.cos(angle);
            dot.y = radius * Math.sin(angle);

            if (score <= maxDosage) { //小于maxDosage每次加1
                if (credit < score) {
                    credit += 4;
                } else {
                    credit = score;
                }
                if (angle < raduisAll / maxDosage * score) {
                    angle += raduisAll / maxDosage * 4
                } else {
                    angle = raduisAll / maxDosage * score;
                }
            } else {//大于maxDosage，用时speed
                if (credit < score) {
                    credit += Math.ceil(score / parseInt(speed));
                } else {
                    credit = score;
                }
                if (angle < raduisAll) {
                    angle += raduisAll / parseInt(speed);
                } else {
                    angle = raduisAll
                }
            }

            text(credit);


            let animationFrame = window.requestAnimationFrame(drawFrame);
            ctx.scale(parseInt(ratio) * 2, parseInt(ratio) * 2);//讲画布放大

            ctx.save(); //中间刻度层
            for (let i = 0; i < color.length; i++) {
                ctx.beginPath();
                ctx.strokeStyle = color[i];
                ctx.lineWidth = 10;
                ctx.arc(0, 0, radius - 15, raduisAll / maxDosage * scole[i], raduisAll / maxDosage * scole[i + 1], false);
                ctx.stroke();
            }

            ctx.restore();
            ctx.save(); //中间刻度层
            ctx.beginPath();
            ctx.strokeStyle = '#fff';
            ctx.lineWidth = 3;
            ctx.arc(0, 0, radius, 0, raduisAll, false);
            ctx.stroke();
            ctx.restore();

            ctx.save();//外边运动的圈
            for (let i = 0; i < color.length; i++) {
                if (score <= maxDosage) {
                    if (credit > scole[i]) {
                        ctx.beginPath();
                        ctx.lineWidth = 3;
                        ctx.strokeStyle = color[i];
                        ctx.arc(0, 0, radius, angles[i], angle, false);
                        ctx.stroke();
                    }
                } else {
                    if (credit * maxDosage / score > scole[i]) {
                        ctx.beginPath();
                        ctx.lineWidth = 3;
                        ctx.strokeStyle = color[i];
                        ctx.arc(0, 0, radius, angles[i], angle, false);
                        ctx.stroke();
                    }
                }
            }
            ctx.restore();

            dot.draw(ctx, credit);
            ctx.save(); // 刻度线
            for (let i = 0; i < scole.length; i++) {
                ctx.beginPath();
                ctx.lineWidth = 4;
                ctx.strokeStyle = scaleColor;
                ctx.moveTo(140, 0);
                ctx.lineTo(130, 0);
                ctx.stroke();
                ctx.rotate(raduisAll / maxDosage * (scole[i + 1] - scole[i]));
            }
            ctx.restore();

            ctx.save(); // 细分刻度线
            for (let i = 0; i < maxDosage / 8; i++) {
                ctx.beginPath();
                ctx.lineWidth = 1;
                ctx.strokeStyle = scaleColor;
                ctx.moveTo(140, 0);
                ctx.lineTo(133, 0);
                ctx.stroke();
                ctx.rotate(raduisAll / maxDosage * 8);
            }
            ctx.restore();

            ctx.save(); //用量
            ctx.rotate(Math.PI / 2);
            for (let i = 0; i < scole.length - 1; i++) {
                ctx.fillStyle = 'rgba(0,0,0,0.5)';
                ctx.font = '12px Arial';
                ctx.textAlign = 'center';
                ctx.fillText(scole[i], 0, -115);
                ctx.rotate(raduisAll / maxDosage * (scole[i + 1] - scole[i]));
            }
            ctx.restore();

            ctx.save();
            ctx.rotate(10 * deg0);
            ctx.textAlign = 'center';
            ctx.fillStyle = 'rgba(38, 162, 255,0.8)';
            ctx.font = '14px Arial';
            ctx.fillText('年用量/m³', 0, -40);
            ctx.restore();

            ctx.save();
            ctx.rotate(10 * deg0);
            ctx.textAlign = 'center';
            ctx.font = '16px Arial';
            if (score >= scole[2]) {
                ctx.fillStyle = color[2];
                ctx.fillText('第三阶梯', 0, 45);
            } else if (score >= scole[1]) {
                ctx.fillStyle = color[1];
                ctx.fillText('第二阶梯', 0, 45);
            } else if (score >= scole[0]) {
                ctx.fillStyle = color[0];
                ctx.fillText('第一阶梯', 0, 45);
            }
            ctx.restore();
            ctx.restore();
            ctx.save();
            if (credit === score) {
                window.cancelAnimationFrame(animationFrame)
            }
        })();

        function Dot() {
            this.x = 0;
            this.y = 0;
            this.draw = function (ctx, process) {
                ctx.save();
                ctx.beginPath();
                for (let i = 0; i < color.length; i++) {
                    if (process > scole[i]) {
                        ctx.fillStyle = color[i];
                    }
                }
                ctx.arc(this.x, this.y, 5, 0, Math.PI * 2, false);
                ctx.fill();
                ctx.restore();
            };
        }

        function text(process) {
            ctx.save();
            ctx.rotate(10 * deg0);
            for (let i = 0; i < color.length; i++) {
                if (process > scole[i]) {
                    ctx.fillStyle = color[i];
                }
            }

            ctx.font = 50 * parseInt(ratio) * 2 + 'px Microsoft yahei';
            ctx.textAlign = 'center';
            ctx.textBaseLine = 'top';
            ctx.fillText(process, 0, 100);
            ctx.restore();
        }

        function diskAngleList(raduisAll, dosageList, maxDosage) {
            let list = [], listDosage = dosageList.push(maxDosage);
            for (let i = 1; i < listDosage.length; i++) {
                list.push(raduisAll * (listDosage[i] - listDosage[i - 1]) / maxDosage);
            }
            return list;
        }
    }
}

